import './pro-card.less'
import {designComponent, useStyles} from "plain-design-composition";
import React from "react";

const paddingSize = 24
const marginSize = 24

export const ProdCard = designComponent({
    props: {
        title: {type: String},
        margin: {type: [Boolean, Number], default: true},
        padding: {type: [Boolean, Number], default: true},
        fullPage: {type: Boolean},
        fullHeight: {type: Boolean},
    },
    slots: ['default', 'head', 'headRight', 'foot'],
    setup({props, slots}) {

        const styles = useStyles(style => {
            if (props.fullPage) {
                style.height = `calc(100% - ${paddingSize}px)`
            }
            if (props.fullHeight) {
                style.height = '100%'
            }
            if (props.fullPage || props.fullHeight) {
                style.display = 'flex'
                style.flexDirection = 'column'
            }

            if (props.margin != false) {
                style.margin = `${typeof props.margin === 'boolean' ? (props.margin ? marginSize : '') : props.margin}px`
            }
        })

        const bodyStyles = useStyles(style => {
            if (props.padding != false) {
                const val = `${typeof props.padding === 'boolean' ? (props.padding ? paddingSize : '') : props.padding}px`
                style.paddingLeft = val
                style.paddingRight = val
                style.paddingTop = '16px'
                style.paddingBottom = '16px'
            }
            if (props.fullHeight || props.fullPage) {
                style.flex = '1'
                style.overflow = 'hidden'
            }
        })

        return () => (
            <div className="pro-card" style={styles.value}>
                {(slots.head.isExist() || slots.headRight.isExist() || props.title) && (
                    <div className="pro-card-head">
                        {slots.head(props.title)}
                        {slots.headRight()}
                    </div>
                )}
                <div className="pro-card-body" style={bodyStyles.value}>
                    {slots.default()}
                </div>
                {slots.foot.isExist() && (
                    <div className="pro-card-foot">
                        {slots.foot()}
                    </div>
                )}
            </div>
        )
    },
})